<template>
  <div>
    <div class="main-wrapper" :style="{ 'background-color': bgColor }">
      <div class="wave-wrapper" :style="{ transform: 'scale(1,' + per + ')' }" v-for="i in 2">
        <div class="wave" v-for="j in 2">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 32">
            <path :fill="i == 1 ? colorBehind : colorFront" fill-opacity="1"
              d="M350,17.32V32H0V17.32C116.56,65.94,175-39.51,350,17.32Z"></path>
          </svg>
        </div>
        <div class="water" :style="{ 'background-color': i == 1 ? colorBehind : colorFront }"></div>
      </div>
      <div class="close-icon">
        <a href="#" class="close-button" @click="onClickCloseWin" v-show="!showMenu">
          <div class="in">
            <div class="close-button-block"></div>
            <div class="close-button-block"></div>
          </div>
          <div class="out">
            <div class="close-button-block"></div>
            <div class="close-button-block"></div>
          </div>
        </a>
      </div>
      <div class="nav-icon" v-bind:class="{ active: showMenu }" @click="showMenu = !showMenu">
        <div></div>
      </div>
      <div class="menu-wrapper" :class="{ active: showMenu }">
        <div class="menu">
          <div class="title" :style="{ color: settingThemeColor }">设置</div>
          <div class="settings-wrapper">
            <!-- 开机自启 -->
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">开机自启</div>
              <div class="detail">
                <switcher v-model="autoLaunch" :color="settingThemeColor"></switcher>
              </div>
            </div>
            <!-- 开机自启 end -->
            <div class="div" :style="{ 'background-color': settingThemeColor }"
              style="width: 100%; height: 1px; margin: 10px 0"></div>
            <!-- 通知 -->
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">通知</div>
              <div class="detail">
                <switcher v-model="alerting" :color="settingThemeColor"></switcher>
              </div>
            </div>
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">通知间隔(min)</div>
              <div class="detail fle-aic" :style="{ color: settingThemeColor }">
                <input type="number" v-model.number="duration" @change="changeData('duration')"
                  :style="{ color: settingThemeColor, border: (typeof (duration) == 'number' ? 'none' : '1px solid #f56c6c') }"
                  :disabled="alerting">
              </div>
            </div>
            <!-- 通知 end -->
            <!-- 每日目标 -->
            <div class="div" :style="{ 'background-color': settingThemeColor }"
              style="width: 100%; height: 1px; margin: 10px 0"></div>
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">每日目标(ml)</div>
              <div class="detail fle-aic" :style="{ color: settingThemeColor }">
                <input type="number" v-model.number="goal" @change="changeData('goal')"
                  :style="{ color: settingThemeColor, border: (typeof (goal) == 'number' ? 'none' : '1px solid #f56c6c') }">
              </div>
            </div>
            <!-- 每日目标 end -->
            <!-- 杯子容量 -->
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">杯子容量(ml)</div>
              <div class="detail fle-aic" :style="{ color: settingThemeColor }">
                <input type="number" v-model.number="cup" @change="changeData('cup')"
                  :style="{ color: settingThemeColor, border: (typeof (cup) == 'number' ? 'none' : '1px solid #f56c6c') }">
              </div>
            </div>
            <!-- 杯子容量 end -->
            <!-- 主题定制 -->
            <div class="div" :style="{ 'background-color': settingThemeColor }"
              style="width: 100%; height: 1px; margin: 10px 0"></div>
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">主页背景</div>
              <div class="detail fle-aic" :style="{ color: settingThemeColor }">
                <!-- 								<input v-model="bgColor" @change="changeData('bgColor')"
									:style="{color: settingThemeColor}"> -->
                <verte menuPosition="center" :draggable="false" model="rgb" :enableAlpha="false" :value="bgColor"
                  @input="bgColor = $event" :showHistory="true"
                  :colorHistory="['#2980b9', '#33aa91', '#51667d', '#a463bf', '#f2c511', '#f4a630']"></verte>
              </div>
            </div>
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">波浪(前)</div>
              <div class="detail fle-aic" :style="{ color: settingThemeColor }">
                <!-- 								<input v-model="colorFront" @change="changeData('colorFront')"
									:style="{color: settingThemeColor}"> -->
                <verte menuPosition="center" :draggable="false" model="rgb" :enableAlpha="false" :value="colorFront"
                  @input="colorFront = $event" :showHistory="true"
                  :colorHistory="['#2980b9', '#33aa91', '#51667d', '#a463bf', '#f2c511', '#f4a630']"></verte>
              </div>
            </div>
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">波浪(后)</div>
              <div class="detail fle-aic" :style="{ color: settingThemeColor }">
                <!-- 	<input v-model="colorBehind" @change="changeData('colorBehind')"
									:style="{color: settingThemeColor}"> -->
                <verte menuPosition="center" :draggable="false" model="rgb" :enableAlpha="false" :value="colorBehind"
                  @input="colorBehind = $event" :showHistory="true"
                  :colorHistory="['#2980b9', '#33aa91', '#51667d', '#a463bf', '#f2c511', '#f4a630']"></verte>
              </div>
            </div>
            <div class="set fle-jcsb">
              <div class="name" :style="{ color: settingThemeColor }">设置主题色</div>
              <div class="detail fle-aic" :style="{ color: settingThemeColor }">
                <!-- 					<input v-model="settingThemeColor" @change="changeData('settingThemeColor')"
									:style="{color: settingThemeColor}"> -->
                <verte menuPosition="center" :draggable="false" model="rgb" :enableAlpha="false"
                  :value="settingThemeColor" @input="settingThemeColor = $event" :showHistory="true"
                  :colorHistory="['#2980b9', '#33aa91', '#51667d', '#a463bf', '#f2c511', '#f4a630']"></verte>
              </div>
            </div>
            <!-- 主题定制 end -->
            <!-- 重置 -->
            <div class="reset" :style="{ color: settingThemeColor }" @click="reset">
              重置
            </div>
            <!-- 重置 end -->
          </div>
        </div>
      </div>
      <template v-if="!showMenu">
        <div class="top-nums center">
          <div class="big">{{ haveDrink }} <small>ml</small></div>
          <div class="small">每日目标：{{ goal }}ml</div>
        </div>
        <div class="add-button center" @click="drink(1)">
          <svg t="1610007263873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2579" width="200" height="200">
            <path
              d="M853.333333 480H544V170.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v309.333333H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h309.333333V853.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V544H853.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z"
              p-id="2580"></path>
          </svg>
          <div class="text">{{ cup }}ml</div>
        </div>
        <div class="small-button center minus" @click="drink(0)">
          <svg t="1610007248082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2435" width="200" height="200">
            <path
              d="M853.333333 544H170.666667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h682.666666c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z"
              p-id="2436"></path>
          </svg>
        </div>
        <div class="small-button center calendar" @click="$refs.history.open()">
          <svg t="1610007209685" class="icon" viewBox="0 0 1060 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2294" width="200" height="200">
            <path
              d="M514.90651816 857.19709059c190.77594415 0 345.42840472-154.65246056 345.42840472-345.42840395 0-190.77594415-154.65246056-345.42840472-345.42840472-345.42840472-190.77594415 0-345.42840472 154.65246056-345.42840394 345.42840472 0 190.77594415 154.65246056 345.42840472 345.42840394 345.42840395z m0 49.34691494c-218.03240444 0-394.7753189-176.74291523-394.77531889-394.77531889 0-218.03240444 176.74291523-394.7753189 394.77531888-394.77531967 218.02276625 0 394.7753189 176.74291523 394.77531968 394.77531967 0 218.03240444-176.74291523 394.7753189-394.77531968 394.77531889z m0 0"
              p-id="2295"></path>
            <path
              d="M539.57997564 265.03411183c0-13.62822976-11.04522772-24.67345747-24.67345749-24.67345747s-24.67345747 11.04522772-24.67345746 24.67345748v265.23966771c0 7.10325697 3.05526773 13.86918208 8.38512095 18.55328307l148.04074411 129.53565197c10.24526759 8.99231893 25.84930221 7.97068362 34.84162114-2.26494656 8.99231893-10.24526759 7.97068362-25.84930221-2.26494656-34.84162036L539.57997564 519.07434319V265.03411183z m0 1e-8"
              p-id="2296"></path>
          </svg>
        </div>
      </template>
      <vue-bottom-sheet ref="history">
        <v-chart class="chart" :option="option" />
      </vue-bottom-sheet>
    </div>
  </div>
</template>

<script>
import Switcher from '@/components/switcher'
import { clearTimeout } from 'timers';
import Verte from 'verte';
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
export default {
  components: {
    Switcher, Verte, VueBottomSheet,
  },
  data() {
    return {
      goal: 1500,
      cup: 300,
      haveDrink: 0,
      colorFront: '#32BAFA',
      colorBehind: '#2C7FBE',
      showMenu: false,
      bgColor: '#1e384c',
      duration: 60,
      alerting: false,
      settingThemeColor: '#1e384c',
      initFlag: false,
      history: {},
      alertTimeout: null,
      showHistory: false,
      autoLaunch: false,

    }
  },
  methods: {
    drink(n) {
      const cup = n ? this.cup : -this.cup
      this.haveDrink += cup
      this.haveDrink = this.haveDrink < 0 ? 0 : this.haveDrink
      this.haveDrink = this.haveDrink > this.goal ? this.goal : this.haveDrink
      this.writeConfigFile()
    },
    transTime(date) {
      date = new Date(date)
      const year = date.getFullYear()
      const month = date.getMonth()
      const day = date.getDate()
      return year + month + day
    },
    transTime1(date) {
      date = new Date(date)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return month + '/' + day
    },
    changeData(str) {
      let obj = {}
      obj[str] = this[str]
      this.writeConfigFile()
    },
    reset() {
      console.log("reset")
      this.goal = 1500
      this.cup = 300
      this.haveDrink = 0
      this.colorFront = '#32BAFA'
      this.colorBehind = '#2C7FBE'
      this.bgColor = '#1e384c'
      this.duration = 60
      this.alerting = false
      this.settingThemeColor = '#1e384c'
      this.autoLaunch = false

      this.writeConfigFile()
    },
    writeConfigFile() {
      const {remote} = require("electron")
      const configDir = remote.app.getPath('userData');
      console.log("wringFile")
      const fs = require("fs")
      const path = require('path');
      const configPath = path.join(configDir, 'config.json');
      let config = {
        goal: this.goal,
        cup: this.cup,
        haveDrink: this.haveDrink,
        colorFront: this.colorFront,
        colorBehind: this.colorBehind,
        bgColor: this.bgColor,
        duration: this.duration,
        alerting: this.alerting,
        settingThemeColor: this.settingThemeColor,
        date: new Date().getTime(),
        history: this.history,
        autoLaunch: this.autoLaunch
      }
      fs.writeFileSync(configPath, JSON.stringify(config))
    },
    // 隐藏窗口
    onClickCloseWin() {
      const { remote } = require("electron")
      remote.getCurrentWindow().hide()
    },
    readConfigFile() {
      const {remote} = require("electron")
      const configDir = remote.app.getPath('userData');
      const fs = require("fs")
      const path = require('path');
      const config = fs.readFileSync(path.join(configDir, 'config.json'), "utf8")
      const { goal, cup, haveDrink, colorFront, colorBehind, bgColor, duration, alerting, settingThemeColor, date, history, autoLaunch } = JSON.parse(config);
      this.goal = goal
      this.cup = cup
      this.colorFront = colorFront
      this.colorBehind = colorBehind
      this.bgColor = bgColor
      this.duration = duration
      this.alerting = alerting
      this.settingThemeColor = settingThemeColor
      this.autoLaunch = autoLaunch
      let lastDate = date
      if (!history) {
        history = {}
      }
      if (this.transTime(new Date().getTime()) == this.transTime(lastDate)) {
        this.haveDrink = haveDrink
      }
      else {
        this.haveDrink = 0
        history[lastDate] = haveDrink
        this.writeConfigFile()
      }
      this.history = history
      this.initFlag = true
    },
    initData() {
      const {remote} = require("electron")
      const configDir = remote.app.getPath('userData');
      const fs = require("fs")
      const path = require('path');
      const isExist = fs.existsSync(path.join(configDir, 'config.json'))
      if (isExist) {
        this.readConfigFile()
      }
      else {
        this.reset()
        this.initFlag = true
      }
    },

    async alert() {
      console.log("alert --" + new Date())
      const { remote } = require("electron")
      const screen = remote.screen;
      const winURL = process.env.NODE_ENV === 'development'
        ? `http://localhost:8080/`
        // : `file://${__dirname}/index.html`
        : "app://./index.html"
      let screenWidth = (screen.getPrimaryDisplay().workAreaSize.width);
      let screenHeight = (screen.getPrimaryDisplay().workAreaSize.height);
      const BrowserWindow = remote.BrowserWindow
      const win = new BrowserWindow({
        width: 300,
        height: 140,
        title: "喝水提醒",
        alwaysOnTop: true,
        autoHideMenuBar: true,
        acceptFirstMouse: true,
        x: screenWidth - 100 - 300,
        y: screenHeight - 100 - 100,
        transparent: true,
        frame: false,
        resizable: false,
        skipTaskbar: true,
        webPreferences: {
          nodeIntegration: true,
          devTools: false,
          enableRemoteModule: true,
          contextIsolation: false,
        },
        show: false
      })
      win.loadURL(winURL + '#/alert')
      win.setAlwaysOnTop(true, "normal", 100)
      win.showInactive()
    },

    setAlert(n) {
      clearInterval(this.alertTimeout)
      const { ipcRenderer } = require("electron")
      let duration = this.duration
      if (n == 1) {
        duration = 15
      }
      this.alertTime = new Date().getTime() + duration * 60 * 1000
      if (this.alerting) {
        console.log("setAlert: true " + duration + 'min后提醒 ---' + new Date())
        this.alertTimeout = setInterval(() => {
          if(new Date().getTime() >= this.alertTime){
            clearInterval(this.alertTimeout)
            this.alert()
            ipcRenderer.send('setTrayTips', "default");
          }
          else{
            let time =  Math.round((this.alertTime - new Date().getTime()) / 1000)
            let minute = parseInt(time / 60)
            let second = time % 60
            console.log(`还有${minute}分${second}秒`)
            ipcRenderer.send('setTrayTips', {"minute": minute, "second": second});
          }
        }, 1 * 1000)
      }
      else {
        ipcRenderer.send('setTrayTips', "default");
      }
      if (n == 0) {
        this.drink(1)
      }
      this.writeConfigFile()
    }
  },
  created() {
  },
  mounted() {
    this.initData()
    const { ipcRenderer } = require('electron');
    ipcRenderer.on('onClickAlert', (event, arg, a) => {
      this.setAlert(arg)
    })
    const { remote } = require("electron")
    remote.getCurrentWindow().setTitle('喝水提醒')

  },
  computed: {
    per() {
      return (this.haveDrink / this.goal).toFixed(2)
    },
    option() {
      let todayZero = new Date().setHours(0, 0, 0, 0,)
      let xList = [todayZero];
      let history = this.history;

      for (let i = 0; i < 6; i++) {
        xList.push(xList[i] - 24 * 60 * 60 * 1000)
      }
      xList.reverse()
      let data = []
      for (let i = 0; i < 6; i++) {
        let temp = { account: 0 }
        temp.time = this.transTime1(xList[i])
        for (var j in history) {
          let intJ = Number(j)
          if (intJ < xList[i + 1] && intJ > xList[i]) {
            temp.account = history[j]
          }
        }
        data.push(temp)
      }
      return {
        title: {
          text: '最近7天',
          padding: 20,
        },
        grid: {
          containLabel: false,
          left: '0',
          right: '0'
        },
        xAxis: {
          type: 'category',
          data: data.map(e => e.time),
          axisLine: {
            lineStyle: {
              color: '#D6DEE5'
            }
          },
          axisTick: {
            show: false
          },
          minInterval: 3600 * 24 * 1000,
          // maxInterval: 3600 * 24 * 1000,
          splitLine: {
            show: false
          },
          show: false
        },
        yAxis: {
          type: 'value',
          // data: data.map(e => e.account),
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          show: false

        },
        series: [{
          data: data.map(e => e.account),
          type: 'line',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#7BB0FF' // 0% 处的颜色
              },
              {
                offset: 0.6,
                color: 'white' // 100% 处的颜色
              },
              {
                offset: 1,
                color: 'white' // 100% 处的颜色
              }
              ],
              global: false // 缺省为 false
            },
            origin: 'start',
            opacity: 0.3
          },
          lineStyle: {
            width: 4
          },
          itemStyle: {
            // opacity: 0
          }
        }],
        color: ['#7BB0FF'],
        textStyle: {
          color: '#9E9B9B'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: '{b} <br> {c}ML'
        }

      }
    },
  },
  watch: {
    alerting(newValue, oldValue) {
      console.log("alertingChanged")
      console.log(this.initFlag)
      if (this.initFlag) {
        if (!this.duration) {
          alert("间隔不可以为0")
          this.alerting = false
          return
        }
        this.setAlert()
      }

    },
    bgColor() {
      this.writeConfigFile()
    },
    colorFront() {
      this.writeConfigFile()
    },
    colorBehind() {
      this.writeConfigFile()
    },
    settingThemeColor() {
      this.writeConfigFile()
    },
    autoLaunch(val) {
      if (this.initFlag) {
        this.writeConfigFile()
        const { ipcRenderer } = require("electron")
        ipcRenderer.send('setStartWhenSystemStart', val)
      }
    }
  },
}
</script>

<style scoped lang="scss">
.main-wrapper {
  -webkit-app-region: drag;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  user-select: none;

  & * {
    -webkit-app-region: none;
  }

  .wave-wrapper {
    width: 100vw;
    height: 100vh;
    position: absolute;
    transition: 1s all;
    bottom: 0;
    left: 0;
    transform-origin: 100% 100%;

    &>div {
      width: 100vw;
      height: 100px;
      flex-shrink: 0;
      position: absolute;
      animation: wave 1s linear infinite;

      &:first-child {
        left: -100vw;
      }

      svg {
        transform: scaleY(1.6);
      }
    }

    .water {
      position: absolute;
      bottom: 0;
      width: 100vw;
      height: calc(100% - 34px);
      background-color: #32BAFA;
      animation: water 1s linear infinite;
    }

    &:first-child {
      &>div {
        animation-delay: .5s;
      }

      .water {
        background-color: #2C7FBE;
      }
    }

    @keyframes wave {
      0% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(50%, 10px, 0);
      }

      100% {
        transform: translate3d(100%, 0, 0);
      }
    }

    @keyframes water {
      0% {}

      50% {
        transform: translate3d(0, 10px, 0);
      }

      100% {}
    }
  }

  .close-icon {
    .close-button {
      display: block;
      width: 40px;
      height: 40px;
      position: relative;
      overflow: hidden;
      margin: 1em;

      >div {
        position: relative;
      }

      &-block {
        width: 40px;
        height: 20px;
        position: relative;
        overflow: hidden;

        &:before,
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: calc(55% - 4px);
          display: block;
          width: 4px;
          height: 25px;
          transform-origin: bottom center;
          background: white;
          transition: all ease-out 280ms;
        }

        &:last-of-type {
          transform: rotate(180deg);
        }
      }

      .in {
        .close-button-block {
          &:before {
            transition-delay: 280ms;
            transform: translateX(20px) translateY(-20px) rotate(45deg);
          }

          &:after {
            transition-delay: 280ms;
            transform: translateX(-22px) translateY(-22px) rotate(-45deg);
          }
        }
      }

      .out {
        position: absolute;
        top: 0;
        left: 0;

        .close-button-block {
          &:before {
            transform: translateX(-5px) translateY(5px) rotate(45deg);
          }

          &:after {
            transform: translateX(5px) translateY(5px) rotate(-45deg);
          }
        }
      }

      &:hover {
        .in {
          .close-button-block {
            &:before {
              transform: translateX(-5px) translateY(5px) rotate(45deg);
            }

            &:after {
              transform: translateX(5px) translateY(5px) rotate(-45deg);
            }
          }
        }

        .out {
          .close-button-block {
            &:before {
              transform: translateX(-20px) translateY(20px) rotate(45deg);
            }

            &:after {
              transform: translateX(20px) translateY(20px) rotate(-45deg);
            }
          }
        }
      }
    }
  }

  .nav-icon {
    margin: 1em;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    z-index: 5;
    right: 0;
    top: 0;

    &:after,
    &:before,
    div {
      background-color: white;
      border-radius: 3px;
      content: '';
      display: block;
      height: 5px;
      width: 80%;
      margin: 7px 0;
      transition: all .2s ease-in-out;
    }

    &:before {
      width: 100%;
    }

    &:after {
      width: 60%;
    }

    &:hover {

      &:after,
      &:before,
      div {
        width: 100%;
      }
    }

    &.active {
      &:after {
        background-color: #004d6e;
        width: 100%;
        transform: translateY(-12px) rotate(-135deg);
      }

      &:before {
        background-color: #004d6e;
        width: 100%;
        transform: translateY(12px) rotate(135deg);
      }

      div {
        transform: scale(0);
      }
    }
  }

  .menu-wrapper {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    right: -30px;
    top: -30px;
    width: 0;
    height: 0;
    transition: 1s all;
    background-color: rgba(177, 211, 236, .9);

    &.active {
      right: -300px;
      top: -100px;
      width: 1000px;
      height: 1000px;
    }

    .menu {
      width: 300px;
      height: 500px;
      position: absolute;
      bottom: 400px;
      left: 400px;

      .title {
        color: #1e384c;
        font-size: 30px;
        margin: 28px;
      }

      .settings-wrapper {
        padding: 0 20px;

        .set {
          margin: 10px 0;

          input {
            width: 55px;
            margin-right: 5px;
            outline: none;
            border: none;
            background-color: rgba(177, 211, 236, .9);
          }

          .text {
            width: 28px;
          }
        }
      }

      .reset {
        position: absolute;
        bottom: 40px;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }

  .top-nums {
    color: white;
    flex-direction: column;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    margin: auto;

    .big {
      font-size: 50px;
    }

    .small {
      font-size: 14px;
      margin-top: 20px;
    }
  }

  .add-button {
    width: 60px;
    height: 60px;
    cursor: pointer;
    flex-direction: column;
    border-radius: 50%;
    position: absolute;
    top: 320px;
    background-color: white;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: .2s all;

    svg {
      transform: scale(.7);
    }

    .text {
      display: none;
    }

    &:hover {
      transform: scale(1.1, 1.1);

      svg {
        display: none;
      }

      .text {
        display: block;
      }
    }
  }

  .small-button {
    width: 40px;
    height: 40px;
    cursor: pointer;
    flex-direction: column;
    border-radius: 50%;
    position: absolute;
    top: 380px;
    background-color: white;
    left: 50px;
    transition: .2s all;

    svg {
      transform: scale(.7);
    }

    &:hover {
      transform: scale(1.1, 1.1);
    }

    &.calendar {
      right: 50px;
      left: auto;
    }
  }
}

.history-wrapper {
  overflow: hidden;

}
</style>
<style>
.bottom-sheet__content {
  overflow-y: hidden !important;
}

.chart {
  height: 60vh;
}
</style>